<template>
  <div id="question-container">
    <!-- 头部卡片 -->
    <el-card class="head-card"
      ><el-form
        :inline="true"
        :model="formInline"
        ref="searchForm"
        class="demo-form-inline"
      >
        <el-form-item label="学科" prop="subject">
          <subSelect v-model="formInline.subject"></subSelect>
        </el-form-item>
        <el-form-item label="阶段" prop="step">
          <el-select v-model="formInline.step" placeholder="请选择阶段">
            <el-option label="初级" value="1"></el-option>
            <el-option label="中级" value="2"></el-option>
            <el-option label="高级" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="企业" prop="enterprise">
          <comSelect v-model="formInline.enterprise"></comSelect>
        </el-form-item>
        <el-form-item label="题型" prop="type">
          <el-select v-model="formInline.type" placeholder="请选择题型">
            <el-option label="单选" value="1"></el-option>
            <el-option label="多选" value="2"></el-option>
            <el-option label="简答" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="难度" prop="difficulty">
          <el-select v-model="formInline.difficulty" placeholder="请选择难度">
            <el-option label="简单" value="1"></el-option>
            <el-option label="一般" value="2"></el-option>
            <el-option label="困难" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="作者" prop="username">
          <el-input v-model="formInline.username"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="formInline.status" placeholder="请选择状态">
            <el-option label="启用" value="1"></el-option>
            <el-option label="禁用" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="日期" prop="create_time">
          <el-date-picker
            v-model="formInline.create_time"
            type="date"
            placeholder="选择日期"
            style="width: 100%;"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="标题" prop="title">
          <el-input v-model="formInline.title" class="title-input"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="queryList">搜索</el-button>
          <el-button @click="removeQuery">清除</el-button>
          <el-button type="primary" @click="openDialog(0)">
            <i class="el-icon-plus"></i> 新增试题</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 主体卡片 -->
    <el-card>
      <el-table :data="tableData" style="width: 100%" class="my-table" border>
        <el-table-column type="index" label="序号" width="50px">
        </el-table-column>
        <el-table-column label="题目">
          <template v-slot="scope">
            <span v-html="scope.row.title"></span>
            <!-- <span>{{ scope.row.title }}</span> -->
          </template>
        </el-table-column>
        <el-table-column label="学科.阶段">
          <template v-slot="scope">
            {{ scope.row.subject_name }}.{{ scope.row.step | formatStep }}
          </template>
        </el-table-column>
        <el-table-column label="题型">
          <template v-slot="scope">
            {{ scope.row.type | formatType }}
          </template>
        </el-table-column>
        <el-table-column prop="enterprise_name" label="企业"> </el-table-column>
        <el-table-column prop="username" label="创建者"> </el-table-column>
        <el-table-column label="状态">
          <template v-slot="scope">
            <span v-if="scope.row.status === 1">启用</span>
            <span v-else class="active">禁用</span>
          </template>
        </el-table-column>
        <el-table-column prop="reads" label="访问量"> </el-table-column>
        <el-table-column label="操作" width="auto">
          <template v-slot="scope">
            <el-button type="text" @click="openDialog(1, scope.row)"
              >编辑</el-button
            >
            <el-button type="text" @click="changeStatus(scope.row)">{{
              scope.row.status === 0 ? '启用' : '禁用'
            }}</el-button>
            <el-button type="text" @click="handleDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        background
        class="my-page"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="page"
        :page-sizes="[2, 4, 6, 8, 10]"
        :page-size="2"
        layout="total, sizes, prev, pager, next, jumper"
        :total="limit"
      >
      </el-pagination>
    </el-card>
    <diaLog ref="quetionDialog"></diaLog>
  </div>
</template>

<script>
// 导入接口文件
import { questionList, statusQuestion } from '../../../api/question'
// 导入组件
import comSelect from './comSelect'
import subSelect from './subSelect'

import diaLog from './diaLog'
export default {
  name: 'question',
  components: {
    diaLog,
    comSelect,
    subSelect
  },
  data () {
    return {
      // 头部卡片数据
      formInline: {
        // 创建时间
        create_time: '',
        // 阶段
        step: '',
        // 创建者
        username: '',
        // 状态
        status: '',
        // 企业名
        enterprise_name: '',
        // 类型
        type: '',
        // 难度
        difficulty: '',
        // 标题
        title: ''
      },
      // 主体表格数据
      tableData: [],
      // 分页器数据
      page: 1,
      limit: 2
    }
  },
  filters: {
    formatStep (val) {
      const obj = {
        1: '初级',
        2: '中级',
        3: '高级'
      }
      return obj[val]
    },
    formatType (val) {
      const obj = {
        1: '单选',
        2: '多选',
        3: '简单'
      }
      return obj[val]
    }
  },
  created () {
    this.getList()
  },
  methods: {
    // 搜索
    queryList () {
      this.getList()
    },
    // 清除
    removeQuery () {
      this.$refs.searchForm.resetFields()
      this.getList()
    },

    // 获取列表
    getList () {
      questionList({
        ...this.formInline
      }).then(res => {
        console.log(res)
        this.tableData = res.data.data.items
        this.limit = res.data.data.pagination.total
      })
    },
    openDialog (n, item) {
      console.log('123')
      this.$refs.quetionDialog.dialogFormVisible = true
      this.$refs.quetionDialog.addOrEdit = n
      if (n === 1) {
        this.$refs.userDialog.form = { ...item }
      }
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
    },
    handleEdit (index, row) {
      console.log(index, row)
    },
    // 切换状态按钮
    changeStatus (item) {
      statusQuestion({ id: item.id }).then(() => {
        this.$message.success('修改状态成功')
        this.getList()
      })
    },
    handleDelete (index, row) {
      console.log(index, row)
    }
  },
  watch: {
    page: 'getList',
    limit: 'getList'
  }
}
</script>

<style lang="less">
#question-container {
  .head-card {
    // padding-right: 50px;
    margin-bottom: 20px;
    input {
      width: 150px;
    }
    .title-input {
      width: 388px;
      input {
        width: 100%;
      }
    }
    .el-form-item {
      .el-form-item__label {
        padding-right: 30px;
      }
      margin-right: 30px;
    }
    .el-form--inline .el-form-item__label {
      font-family: Microsoft YaHei Regular;
      color: #7a7c7f;
      font-weight: bold;
    }
    .el-button {
      i {
        font-size: 16px;
        font-weight: bold;
      }
      span {
        font-family: Microsoft YaHei Regular;
        font-weight: bold;
      }
    }
    .el-form {
      .el-form-item {
        margin-top: 11px;
        margin-bottom: 11px;
      }
    }
  }

  .my-table {
    .active {
      color: red;
    }
    margin-bottom: 30px;
    thead .cell {
      font-family: Microsoft YaHei Regular;
      color: #7a7c7f;
      font-weight: bold;
    }
    tbody {
      .cell {
        font-family: Microsoft YaHei Regular;
        color: #5a5d62;
        font-weight: bold;
        span {
          font-family: Microsoft YaHei Regular;
          font-weight: bold;
        }
      }
    }
  }

  .my-page {
    text-align: center;
  }
}
</style>
